<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DoitCSS V2.3 -colorbox弹层实例</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="DoitCSS V1.0">
	<meta name="description" content="DoitCSS是根据bootstap改编的CSS框架">
	<!--基础-->
	<link href="../css/base.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--文字排版-->
	<link href="../css/typography.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表格-->
	<link href="../css/tables.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表单按钮-->
	<link href="../css/form-buttons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--架构-->
	<link href="../css/layouts.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--元件-->
	<link href="../css/elements.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--菜单-->
	<link href="../css/navigation.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--分页-->
	<link href="../css/pagination.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--清除浮动-->
	<link href="../css/clear.css?ver=v2.3" rel="stylesheet" type="text/css">
	<link href="../js/colorbox/colorbox.min.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/colorbox/jquery.colorbox-min.js"></script>
	<script type="text/javascript" src="../js/calendar/WdatePicker.js"></script>
</head>
<script type="text/javascript">
$(function(){
	$('a.colorbox').colorbox();
	$('#input-calendar').addClass('input-calendar');
	$('#input-calendar').click(function(){
		WdatePicker({minDate:'2010-05-04',maxDate:'2016-11-11',dateFmt:'yyyy-MM-dd HH:mm:ss'});
	});
});
</script>
<body>
<div class="container mt20">
<a href="https://paymaya.com/assets/img/paymaya-horizontallogo.png" class="colorbox" data-width="228" data-height="90">图片的灯箱效果1</a> <a href="https://paymaya.com/assets/img/paymaya-horizontallogo.png" class="colorbox link-danger" data-width="228" data-height="90" title="神奇的标题">图片的灯箱效果2</a><br><br>
<a href="ajax-content.html" class="colorbox">AJAX调用的灯箱效果1</a> <a href="ajax-content.html" class="colorbox link-success" title="神奇的标题">AJAX调用的灯箱效果2</a><br><br>
更多实例请查阅：<a href="http://www.jacklmoore.com/colorbox/example2/" target="_blank">更多官方实例</a><br><br>
<strong>日历演示实例</strong>：<br>
<input type="text" name="date" id="input-calendar" class="input width180">
</div>
</body>
</html>